<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
		<title>svg mask</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<style type="text/css">
			svg{
				background-color: #66FFCC;
			}
		</style>
	</head>
	<body>
		<div class="page">
			<svg width="1200px" height="1200px" viewBox="0 0 1200 1200" preserveAspectRatio="xMidYMid meet">
				<defs>
					<mask id="m0" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
						<rect x="0" y="0" width="1" height="1" style="fill:#222"></rect>
						<text x=".5" y=".5" width=".1" height=".1" font-size="0.8px" style="fill:white;text-anchor:middle;">s</text>
					</mask>

					<mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse" x="0" y="0" width="1" height="1">
						<rect x="240" y="0" width="100" height="100" style="fill:#222"></rect>
						<text x="290" y="50" width="10" height="10" style="fill:white;text-anchor:middle;">superzdd</text>
					</mask>
				</defs>

				<!-- <rect width="1200" height="600" fill="#000" x="0" y="0"/> -->

				<rect width="100" height="100" />

				<!-- Rounded corner rectangle -->
				<rect x="120" width="100" height="100" rx="15" mask="url(#m0)" />

				<!-- Rounded corner rectangle -->
				<rect x="240" width="100" height="100" rx="15" mask="url(#m1)" />

				<text x="0" y="120" style="fill:white;">superzdd</text>
			</svg>
		</div>
	</body>
</html>
